<template>
    <div class="wrap">
        <div class="top">
            
            <div class="info">
                <div class="avatar">
                    <img src="http://job.52kfw.cn/uploads/user_default.jpeg" alt="" width="70px" style="border-radius: 50%;">
                </div>
                <div class="msg">
                    <span>{{userInfo.name}}</span>
                    <div class="introduce">用一句话介绍自己...</div>
                </div>
            </div>
            <div class="option">
                <div class="optionItem">
                    <img src="/icon/jianli.png" alt="">
                    <span>附件简历</span>
                </div>
                <div class="optionItem">
                    <img src="/icon/toudi.png" alt="">
                    <span>已投简历</span>
                </div>
                <div class="optionItem">
                    <img src="/icon/shoucang.png" alt="">
                    <span>我的收藏</span>
                </div>
            </div>
            <div class="list">
            <van-list>
                <van-cell title="个人主义" icon="location-o" is-link @click="showToast('正在开发中')">
                </van-cell>
                <van-cell title="常见问题" icon="location-o" is-link @click="showToast('正在开发中')">
                </van-cell>
                <van-cell title="设置" icon="location-o" is-link @click="showToast('正在开发中')">
                </van-cell>
                <van-cell title="帮助与反馈" icon="location-o" is-link @click="showToast('正在开发中')">
                </van-cell>
            </van-list>
            </div>
            <div class="log">
                <van-button type="danger" @click="logout">退出登录</van-button>
            </div>
        </div>
        
    </div>
</template>

<script setup>
import {useUserStore} from '../../stores/useUserStore'
import {useRouter} from 'vue-router'
import {showToast} from 'vant'
import {reactive} from 'vue'
const userStore = useUserStore()
const router = useRouter()
const userInfo = reactive({
    ...userStore.userInfo
})
console.log(userInfo);

const logout = ()=>{
    userStore.userInfo = {}
    userStore.token = ''
    showToast('退出成功')
    router.push({
        path:'/login',
        query:{
            redirect:router.currentRoute.value.path
        }
    })
}
</script>

<style scoped lang="less">
.wrap{
    width: 100%;
    height: 100%;
    .top{
        height: 193px;
        background: linear-gradient(114deg, #7cb672 0%, #3fa734 90%);;
        padding-top: 40px;
        .info{
            margin-bottom: 20px;
            padding: 0px 15px;
            height: 70px;
            display: flex;
            color: #fff;
            .avatar{
                margin-right: 20px;
            }
            .msg{
                span{
                    font-size: 24px;
                    margin-right: 10px;
                }
                .introduce{
                    font-size: 12px;
                    padding-top: 9px;
                }
            }
        }
        .option{
            width: 80%;
            height: 87px;
            padding: 17px 32px;
            margin: 0 auto;
            border-radius: 10px;
            background-color: #fff;
            display: flex;
            justify-content: space-around;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            .optionItem{
                display: flex;
                flex-direction: column;
                align-items: center;
                img{
                    height: 30px;
                }
                span{
                    font-size: 13px;
                    padding-top: 10px;
                }
            }
        }
        .list{
            padding: 16px 15px;
        }
        .log{
            width: 100%;
            display: flex;
            justify-content: center;
            .van-button{
            width: 300px;
            height: 50px;
            color: #fff;
            border-radius: 25px;
        }
        }
    }
}
</style>